<template>
	<view>

		<image src="../../static/img/loginBg.png" mode="widthFix" class="bgimgBox"></image>
		<view class="logo">
			<view class="img">
				<image src="../../static/img/gylogo.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 账号密码输入框 -->
		<view class="form">
			<view v-if="loginWay == 'default'" class="username"><input :placeholder="i18n.enterCommonlyUsedPhoneNumberEmailAccount"
				 v-model="account" /></view>
			<view v-if="loginWay == 'note'" class="username"><input :placeholder="i18n.enterCommonlyUsedPhoneNumber" v-model="phoneNumber" /></view>
			<view v-if="loginWay == 'note'" class="password">
				<view class="get-code" :style="{ color: getCodeBtnColor }" @click.stop="getCode()">{{i18n.verificationCode}}</view>
				<input :placeholder="i18n.enterCommonlyUsedVerificationCode" v-model="code" />
			</view>
			<view v-if="loginWay == 'default'" class="password">
				<input :placeholder="i18n.pleaseInputPassword" v-model="passwd" :password="passwordStatus" />
				<uni-icons v-if="!passwordStatus" type="eye-filled" size="18" @click="passwordStatus = true"></uni-icons>
				<uni-icons v-if="passwordStatus" type="eye-slash-filled" size="18" @click="passwordStatus = false"></uni-icons>
			</view>

			<view class="btn" @tap="doLogin">{{ i18n.signIn }}
			</view>
			<!-- <view v-if="loginWay == 'default'" class="goWay" @click="loginWay = 'note'">{{i18n.SMSLoginRegistration}}</view> -->
			<view v-if="loginWay == 'note'" class="goWay" @click="loginWay = 'default'">{{i18n.userNamePasswordLogin}}</view>
			<view class="res" style="display: none;">
				<view @tap="toPage('register')">{{i18n.userRegistration}}</view>
				<view @tap="toPage('resetpasswd')">{{i18n.forgetPassword}}</view>
			</view>
		</view>
		<!-- 第三方登录 -->
		<view class="oauth" v-if="isShowOauth">
			<view class="text">— 快速登录 —</view>
			<view class="list">
				<view @tap="oauthLogin('weixin')" v-if="showProvider.weixin" class="icon weixin"></view>
				<view @tap="oauthLogin('qq')" v-if="showProvider.qq" class="icon qq"></view>
				<view @tap="oauthLogin('sinaweibo')" v-if="showProvider.sinaweibo" class="icon sinaweibo"></view>
				<!-- <view @tap="oauthLogin('xiaomi')" v-if="showProvider.xiaomi" class="icon xiaomi"></view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/SDK/md5.min.js';
	export default {
		computed: {
			i18n() {
				return this.$t('userbinding')
			}
		},
		data() {
			return {
				loginWay: 'default',
				phoneNumber: '',
				passwd: '',
				account: '',
				code: '',
				userInfo: '',
				getCodeText: '获取验证码',
				getCodeBtnColor: '#be9d6b',
				getCodeisWaiting: false,
				isShowOauth: true,
				passwordStatus: true,
				showProvider: {
					weixin: false,
					qq: false,
					sinaweibo: false,
					xiaomi: false
				},
				productId: '',
				microShopId: '',
			};
		},
		onShow() {},
		onLoad(option) {
			//APP显示第三方登录
			// #ifdef APP-PLUS
			this.isShowOauth = true;
			// #endif
			this.getProvider();

			if (option.id) {
				console.log(option.id)
				this.productId = option.id
			}
			
			const microShopId = uni.getStorageSync('microShopId');
			if (microShopId) {
				this.microShopId = microShopId;
				console.log(microShopId);
			}
		},
		methods: {
			oauthLogin(provider) {
				uni.showLoading();
				//第三方登录
				uni.login({
					provider: provider,
					success: loginRes => {
						console.log('success: ' + JSON.stringify(loginRes));
						//案例直接获取用户信息，一般不是在APP端直接获取用户信息，比如微信，获取一个code，传递给后端，后端再去请求微信服务器获取用户信息
						uni.getUserInfo({
							provider: provider,
							success: infoRes => {
								console.log(infoRes);
								console.log('用户信息：' + JSON.stringify(infoRes.userInfo));
								uni.setStorage({
									key: 'UserInfo',
									data: {
										username: infoRes.userInfo.nickName,
										face: infoRes.userInfo.avatarUrl,
										signature: '个性签名',
										integral: 0,
										balance: 0,
										envelope: 0
									},
									success: function() {
										uni.hideLoading();
										uni.showToast({
											title: '登录成功',
											icon: 'success'
										});
										setTimeout(function() {
											uni.navigateBack();
										}, 300);
									}
								});
							}
						});
					},
					fail: e => {
						console.log('fail: ' + JSON.stringify(e));
					}
				});
			},
			getProvider() {
				//获取第三方登录服务
				uni.getProvider({
					service: 'oauth',
					success: res => {
						console.log(res)
						let len = res.provider.length;
						for (let i = 0; i < len; i++) {
							//有服务才显示按钮图标
							this.showProvider[res.provider[i]] = true;
							this.isShowOauth = true;
						}
						if (res.provider.length == 0) {
							this.isShowOauth = false;
						}
					}
				});
			},
			toPage(page) {
				uni.hideKeyboard();
				uni.navigateTo({
					url: page
				});
			},
			getCode() {
				uni.hideKeyboard();
				if (this.getCodeisWaiting) {
					return;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: 'none'
					});
					return false;
				}
				this.getCodeText = '发送中...';
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = 'rgba(255, 74, 0, 0.5)';
				//示例用定时器模拟请求效果
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					});
					//示例默认1234，生产中请删除这一句。
					this.code = 1234;
					this.setTimer();
				}, 1000);
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = '重新获取(60)';
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = '#be9d6b';
						this.getCodeText = '获取验证码';
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = '重新获取(' + holdTime + ')';
					holdTime--;
				}, 1000);
			},

			doLogin() {
				console.log(this.account)
				console.log(this.passwd)
				console.log(md5(this.passwd))
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/login/customer', //仅为示例，并非真实接口地址。
					data: {
						account: this.account,
						password: md5(this.passwd)
					},
					method: 'POST',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.text = 'request success';
						if (res.data.code == 200) {
							// alert("登录成功");
							this.userInfo = res.data.data;
							uni.setStorageSync('token', res.data.data.token);
							uni.setStorageSync('userId', res.data.data.Id);
							uni.setStorageSync('name', res.data.data.name);
							uni.setStorageSync('code', res.data.data.code);
							if(this.productId){
								uni.navigateTo({
									url: '../goods/goods?id='+this.productId 
								});
								this.productId='';
							}else{
								uni.switchTab({
									url: '/pages/tabBar/home/homeplus'
								});
							}
						
						} else if (res.data.code == 9999) {
							alert("用户名或密码输入错误");
							// this.text = 'request success';
						}

					}
				});


				// uni.hideKeyboard();
				// //验证手机号码
				// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber)) {
				// 	uni.showToast({
				// 		title: '请填写正确手机号码',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// uni.showLoading({
				// 	title: '提交中...'
				// });
				// //模板示例比对本地储存的用户信息，实际使用中请替换为上传服务器比对。
				// setTimeout(() => {
				// 	let md5PW = md5(this.passwd);
				// 	uni.getStorage({
				// 		key: 'UserList',
				// 		success: res => {
				// 			for (let i in res.data) {
				// 				let row = res.data[i];
				// 				console.log(res)
				// 				console.log(row)
				// 				if (row.username == this.phoneNumber) {
				// 					uni.hideLoading();
				// 					//比对密码
				// 					if (md5PW == res.data[i].passwd) {
				// 						uni.showToast({
				// 							title: '登录成功',
				// 							icon: 'success'
				// 						});
				// 					} else {
				// 						uni.showToast({
				// 							title: '账号或密码不正确',
				// 							icon: 'none'
				// 						});
				// 					}
				// 				}
				// 			}
				// 		},
				// 		fail: function(e) {
				// 			uni.hideLoading();
				// 			uni.showToast({
				// 				title: '手机号码未注册',
				// 				icon: 'none'
				// 			});
				// 		}
				// 	});
				// }, 1000);
			}


		}
	};
</script>

<style lang="scss">
	@import '../../static/css/login.scss';

	.form {
		.goWay {
			color: #666;
			padding: 30upx 20upx;
		}

		.res {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100upx;
			color: rgba($color: #9b9b9b, $alpha: 0.8);

			view {
				padding: 0 20upx;

				&:last-child {
					border-left: 1px solid #666;
				}
			}
		}
	}

	.oauth {
		@media all and (max-height: 150vw) {
			display: none;
		}

		position: absolute;
		bottom: 50upx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba($color: #222222, $alpha: 0.8);
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				color: #666;
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}
</style>
